@import "../_variables";

.effeckt-list-scroll {
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 400px;

  > li {
    position: relative;
    z-index: 2;
    transform: translateZ(0);
  }
}


// Grow
[data-effeckt-type="grow"] li {
  transition: all $effeckt-list-scroll-transition-duration ease;
  transform-origin: 50% 50%;
  &.past, &.future {
    transform: scale(0.01);
  }
}


// Curl
[data-effeckt-type="curl"] li {
  // this was originally applied to the 'li', 
  // was this a mistake? Seems like it should 
  // be part of the parent <ul>
  perspective: 600px;
  perspective-origin: 0% 50%;
  transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/3 ease;
  transform-origin: 0% 0%;
  backface-visibility: hidden;
  &.past {
    opacity: 0;
    transform: rotateY(90deg);
  }
  &.future {
    opacity: 0;
    transform: rotateY(90deg);
  }
}

// Wave
[data-effeckt-type="wave"] li {
  transition: all $effeckt-list-scroll-transition-duration cubic-bezier(0.260, 0.860, 0.440, 0.985);
  &.past {
    transform: translateX(-70%);
  }
  &.future {
    transform: translateX(-70%);
  }
}

// Fan
[data-effeckt-type="fan"] li {
  transition: all $effeckt-list-scroll-transition-duration cubic-bezier(0.390, 0.575, 0.565, 1.000);
  transform-origin: 0% 0%;
  &.past {
    transform: rotate(-60deg);
  }
  &.future {
    transform: rotate(70deg);
  }
}

// Fade
[data-effeckt-type="fade"] li {
  transition: opacity $effeckt-list-scroll-transition-duration/2 ease-in-out;

  &.past, &.future {
    opacity: 0;
  }
}

// Fly
[data-effeckt-type="fly"] {
  perspective: 400px;
  perspective-origin: 50% 50%;
  li {
    transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;
    transform-origin: 50% 50% -50px;

    &.past, &.future {
      opacity: 0;
    }
    &.past {
      transform: rotateX(180deg);
    }
    &.future {
      transform: rotateX(-180deg);
    }
  }
}

//landing
[data-effeckt-type="landing"] {
  perspective: 400px;
  perspective-origin: 50% 50%;
  li {
    transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;
    transform-origin: 50% 50%;
    &.past, &.future {
      opacity: 0;
    }
    &.past {
      transform: scale(1.5) translate(10%,-50%);
    }
    &.future {
      transform: scale(1.5) translate(-10%,50%);
    }
  }
}

//swing from back to front
[data-effeckt-type="swing-front"] {
  perspective: 400px;
  perspective-origin: 50% 50%;
  li {
    transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;
    &.past, &.future {
      opacity: 0;
    }
    &.past {
      transform-origin: bottom;
      transform: rotateX(140deg);
    }
    &.future {
      transform-origin: top;
      transform: rotateX(-140deg);
    }
  }
}

//swing from front to back
[data-effeckt-type="swing-back"] {
  perspective: 400px;
  perspective-origin: 50% 50%;
  li {
    transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;
    &.past, &.future {
      opacity: 0;
    }
    &.past {
      transform-origin: bottom;
      transform: rotateX(-140deg);
    }
    &.future {
      transform-origin: top;
      transform: rotateX(140deg);
    }
  }
}

//swing from front to back
[data-effeckt-type="twist"] {
  perspective: 400px;
  perspective-origin: 50% 50%;
  li {
    transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;
    transform-origin: center;
    &.past, &.future {
      opacity: 0;
    }
    &.past {
      transform: rotateY(-180deg);
    }
    &.future {
      transform: rotateY(180deg);
    }
  }
}

//open door effect
[data-effeckt-type="door"] {
  perspective: 400px;
  perspective-origin: 50% 50%;
  li {
    transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;
    transform-origin: 0% 0%;
    &.past, &.future {
      opacity: 0;
      transform: rotateY(-90deg);
    }
  }
}

//climb effect
[data-effeckt-type="climb"] {
  perspective: 400px;
  perspective-origin: 50% 50%;
  li {
    transition: all $effeckt-list-scroll-transition-duration ease, opacity $effeckt-list-scroll-transition-duration/2 ease;
    transform-origin: 0% 0%;
    &.past {
      transform: translateY(-200%);
    }
    &.future {
      transform: translateY(200%);
    }
  }
}
